<template>
  <div>
      <el-table :data="permissions" border style="width: 100%" row-key="id" :tree-props="{children: 'child'}">
        <el-table-column prop="name" label="权限名" width="180">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="180">
        </el-table-column>
        <el-table-column prop="routeUrl" label="路由" width="180">
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="180">
        </el-table-column>
        <el-table-column prop="" label="操作" width="180">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="addSubPermission(scope.row.id)">添加子节点</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog title="添加权限" width="30%" :visible="showdialog == 'add'" :before-close="handleAddClose">
        <el-form :inline="false" label-position="left" :model="addData" ref="addFlashPromotion" label-width="68px" size="small" >
            <el-form-item label="名称" prop="name">
            <el-input v-model="addData.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
            <el-input v-model="addData.type" placeholder="类型"></el-input>
            </el-form-item>
            <el-form-item label="路由" prop="routeUrl">
            <el-input v-model="addData.routeUrl" placeholder="路由"></el-input>
            </el-form-item>
            <el-form-item label="链接" prop="url">
            <el-input v-model="addData.url" placeholder="链接"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
            <el-input v-model="addData.sort" placeholder="排序"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialog = '';clearAddData()">取 消</el-button>
            <el-button type="primary" @click="submitAddPermissions">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/config/server.js'
export default {
  data () {
    return {
      permissions: [],
      showdialog: '',
      addData: {
        icon: ' '
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      api.permissionsList().then((res) => {
        this.permissions = res.result
      })
    },
    addSubPermission (id) {
      this.addData.parentId = id
      this.showdialog = 'add'
    },
    handleAddClose () {
      this.clearAddData()
      this.showdialog = ''
    },
    clearAddData () {
      this.addData = {
        icon: ' '
      }
    },
    submitAddPermissions () {
      api.addPermissions(this.addData).then((res) => {
        if (res.ret === 1) {
          this.$message('添加成功')
          this.showdialog = ''
          this.getData()
        } else {
          this.$message(res.msg)
        }
      })
    }
  }
}
</script>

<style>

</style>
